<template>
    <div>
        <template v-for="(item, index) in names" :key="item">
            <!-- <span>{{index}}-{{item}}</span>   想自定义样式,但是因为编译作用域,父组件现在获取不到子组件的值,
            所以需要再父组件的插槽中设置作用域-->
            <slot :item="item" :index="index"></slot>

        </template>
        <slot name="center"></slot>
        <slot name="bottom"></slot>
    </div>
</template>

<script>
export default {
    props: {
        names: {
            type: Array,
            default: () => []
        }
    }
}
</script>

<style lang="scss" scoped>
</style>